<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个表单项的动态检验</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 350px;
            height: auto;
            margin: 30px 0px 0px 40px;
        }
        input{
            width: 250px;
            height: 28px;
            margin-top: 9px;
            border: 1px solid grey;
        }
        label{
            display: inline-block;
            width: 80px;
            margin-right: 10px;
            font-weight: bold;
            text-align: right;
        }
        p{
            color: #aaaaaa;
            font-size: 14px;
            display: block;
            height: 30px;
            margin-left: 90px;
        }
        button{
            width: 60px;
            height: 28px;
            margin-left: 300px;
            margin-top: 20px;
        }
        .error{
           border: 1px solid red;
        }
        .right{
           border:1px solid green;
        }
    </style>
</head>
<body>
<div>
    <label for="name">名称</label><input type="text" id="name"/>
    <p id="span_name">必填，长度为4-16个字符</p>
    <label for="password">密码</label><input type="password" id="password"/>
    <p id="span_password"></p>
    <label for="resure" >密码确认</label><input type="password" id="resure"/>
    <p id="span_resure"> </p>
    <label for="email">邮箱</label><input type="email" id="email"/>
    <p id="span_email"></p>
    <label for="telphone">手机</label><input  id="telphone">
    <p id="span_tel"> </p>
    <button id="submit">提交</button>
    </div>
<script>
    function remindName() {
        document.getElementById("span_name").innerHTML="必填，长度为4~16个字符";
    }
    function checkName() {
        var name=document.getElementById("name").value;
        var len=0,elen=0,clen=0;
        for(var i=0;i<name.length;i++)
        {
            if(name.charCodeAt(i)>255)
            {
                clen+=2;
            }
            else
                    elen++;
        }
        len=elen+clen;
        if(len<4||len>16||len==0){
            document.getElementById("span_name").innerHTML="输入的字符长度应该在4~16之间";
            document.getElementById("span_name").style.color="red";
            document.getElementById("name").className="error";
            return false;
        }
        else{
            document.getElementById("span_name").innerHTML="格式正确";
            document.getElementById("span_name").style.color="green";
            document.getElementById("name").className="right";
            return true;
        }


    }
    function remindPassword() {
        document.getElementById("span_password").innerHTML="密码为6~12位的英文字符";
    }
    function checkPassword() {
        var reg=/^\w{6,12}$/;///w任意的数字字母和下划线
        var password=document.getElementById("password").value;
        if(reg.test(password)){
            document.getElementById("span_password").innerHTML="格式正确";
            document.getElementById("span_password").style.color="green";
            document.getElementById("password").className="right";
            return true;
        }
        else{
            document.getElementById("span_password").innerHTML="密码格式错误！请重新输入";
            document.getElementById("span_password").style.color="red";
            document.getElementById("password").className="error";
            return false;
        }

    }
    function remindAgain() {
        document.getElementById("span_resure").innerHTML="再次输入密码";
    }
    function checkAgain() {
        var pass1=document.getElementById("password").value;
        var pass2=document.getElementById("resure").value;
        if(pass1==pass2&&pass1.length>5)
        {
            document.getElementById("span_resure").innerHTML="密码正确";
            document.getElementById("span_resure").style.color="green";
            document.getElementById("resure").className="right";
            return true;
        }
        else
        {
            document.getElementById("span_resure").innerHTML="密码不匹配";
            document.getElementById("span_resure").style.color="red";
            document.getElementById("resure").className="error";
            return false;
        }
    }
    function remindEmail() {
        document.getElementById("span_email").innerHTML="请输入邮箱号";
    }
    function checkEmail() {
        var reg=/\w+[\w\.]*@[\w\.]+\.\w+/;
        var email=document.getElementById("email").value;
        if(reg.test(email)){
            document.getElementById("span_email").innerHTML="邮箱验证成功";
            document.getElementById("span_email").style.color="green";
            document.getElementById("email").className="right";
            return true;
        }
        else {
            document.getElementById("span_email").innerHTML="邮箱格式不正确";
            document.getElementById("span_email").style.color="red";
            document.getElementById("email").className="error";
            return false;
        }
    }
    function remindTel() {
        document.getElementById("span_tel").innerHTML="请输入手机号(8~11位)";
    }
    function checkTel() {
        var tel=document.getElementById("telphone").value;
        var reg=/\d{8,11}/;
        if(reg.test(tel)){
            document.getElementById("span_tel").innerHTML="手机号码验证成功";
            document.getElementById("span_tel").style.color="green";
            document.getElementById("telphone").className="right";
            return true;
        }
        else{
            document.getElementById("span_tel").innerHTML="请输入正确的手机号码";
            document.getElementById("span_tel").style.color="red";
            document.getElementById("telphone").className="error";
            return false;
        }
    }
    document.getElementById("name").addEventListener('focus',remindName);
    document.getElementById("name").addEventListener('blur',checkName);
    document.getElementById("password").addEventListener('focus',remindPassword);
    document.getElementById("password").addEventListener('blur',checkPassword);
    document.getElementById("resure").addEventListener('focus',remindAgain);
    document.getElementById("resure").addEventListener('blur',checkAgain);
    document.getElementById("email").addEventListener('focus',remindEmail);
    document.getElementById("email").addEventListener('blur',checkEmail);
    document.getElementById("telphone").addEventListener('focus',remindTel);
    document.getElementById("telphone").addEventListener('blur',checkTel);
    document.getElementById("submit").onclick=function () {
        if(checkName()&&checkAgain()&&checkEmail()&&checkPassword()&&checkTel())
        {
            alert("提交成功！");
        }
        else{
            alert("信息错误！请重新填写再提交!");
        }
    };


</script>
</body>
</html>